<template>
  <!-- order-detail-page -->
  <view class="to-buy-page">
    <view class="address-block">
      <uni-icons class="position-img" type="navigate-filled" size="24"></uni-icons>
      <view class="address-select">
        <view class="name-phone">
          <text class="name">{{addressObj.realName || ''}}</text>
          <text class="phone">{{addressObj.contactPhone || ''}}</text>
        </view>
        <text class="addr">{{orderObj.address || ''}}</text>
      </view>
    </view>
    <view class="good-info">
      <view class="good-detail">
        <image class="good-img" :src="orderObj.goodsImg"></image>
        <view class="name-price-num">
          <text class="name">{{orderObj.goodsName || ''}}</text>
          <view class="number-attr">数量： {{ orderObj.goodsNum }} 规格: {{ orderObj.specification }}</view>
          <view class="total-amount">￥{{orderObj.price * orderObj.goodsNum}}</view>
        </view>
      </view>
      <view class="each-line">
        <text>下单编号：</text><text>{{orderObj.orderNo || ''}}</text>
      </view>
      <view class="each-line">
        <text>下单时间：</text><text>{{orderObj.createDate || ''}}</text>
      </view>
      <view class="each-line">
        <text>支付方式：</text><text>在线支付</text>
      </view>
      <view class="each-line">
        <text>配送方式：</text><text>快递</text>
      </view>
      <view class="each-line no-border">
        <text>商品总额</text><text class="red">￥{{orderObj.price * orderObj.goodsNum}}</text>
      </view>
      <view class="each-line no-border">
        <text>运费</text><text class="red">￥{{orderObj.freight}}</text>
      </view>
      <view class="each-line no-border">
        <text></text>
        <view>实付款：<text class="red">￥{{orderObj.totalAmt}}</text></view>
      </view>
      <u-field label="备注" disabled type="textarea" v-model="orderObj.remarks">
      </u-field>
    </view>
    <template v-if="orderObj.orderStatus === '0'">
      <view class="buy-now">
        <text></text>
        <view>
          <button class="each-btn cancel-btn" @click="cancelOrderEvent">取消订单</button>
          <button class="each-btn pay-btn" @click="toPayMoney">去付款</button>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
const api = require('../../config/api')
const util = require('../../utils/util')
export default {
  name: 'orderDetail',
  data() {
    return {
      addressObj: {
        realName: '',
        contactPhone: '',
        address: ''
      },
      orderObj: {
        orderNo: '',
        orderStatus: '',
        goodsImg: '',
        goodsName: '',
        price: '',
        goodsNum: 0,
        totalAmt: '',
        createDate: ''
      }
    }
  },
  onLoad: function (option) {
    this.orderNo = option.orderNo
    this.getOrderInfo()
  },
  methods: {
    // 获取订单详情
    getOrderInfo() {
      util.request(api.orderDetailUrl + this.orderNo, {}, 'POST').then((res) => {
        console.log(res)
        if (res.code !== 0) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        } else {
          this.orderObj = res.data || {}
					let addressStr = this.orderObj.address.split('&')
					this.$set(this.orderObj, 'contactPhone',addressStr[0])
					this.$set(this.orderObj, 'realName',addressStr[1])
					this.$set(this.orderObj, 'address',addressStr[2])
        }
      })
    },
    // 确认收货
    toSureReceipt() {},
    // 取消订单
    cancelOrderEvent() {
      util.request(api.cancelOrderUrl + this.orderNo, {}, 'POST').then((res) => {
        console.log(res)
        if (res.code !== 0) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: '取消订单成功',
            icon: 'none'
          })
          let time1 = setTimeout(() => {
            clearTimeout(time1)
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        }
      })
    },
    // 去支付
    toPayMoney() {}
  }
}
</script>

<style lang="scss">
.to-buy-page {
  padding-bottom: 80rpx;

  .address-block {
    padding: 20rpx;
    padding-left: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;

    .position-img {
      margin-right: 20rpx;
    }

    .address-select {
      width: 600rpx;
      display: inline-flex;
      flex-direction: column;
      font-size: 28rpx;

      .name-phone {
        .name {
          margin-right: 20rpx;
        }
      }

      .addr {
        margin-top: 20rpx;
      }
    }
  }

  .good-detail {
    padding: 20rpx;
    display: flex;
    align-items: center;

    border-bottom: 1rpx solid #f2f2f2;
    border-top: 10rpx solid #f2f2f2;

    .good-img {
      width: 120rpx;
      height: 120rpx;
      margin-right: 30rpx;
    }

    .name-price-num {
      width: 524rpx;
      height: 120rpx;
      padding: 8rpx;
      font-size: 32rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .name,
      .number-attr {
        font-size: 24rpx;
        color: #000;
      }

      .total-amount {
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ff0000;
      }
    }
  }

  .each-line {
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #f2f2f2;

    text {
      width: 150rpx;
    }

    &.no-border {
      border: none;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .red {
        color: #ff0000;
        text-align: right;
      }
    }

    input {
      flex-grow: 1;
    }
  }

  .buy-now {
    width: 100%;
    position: fixed;
    bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx;
    border-top: 1px solid #f2f2f2;

    .each-btn {
      width: 200rpx;
      padding: 10rpx 20rpx;
      font-size: 24rpx;
      border: 1px solid #ececec;
      border-radius: 200rpx;
      margin-left: 20rpx;
      background-color: #fff;
      display: inline-block;

      &.pay-btn {
        color: #fff;
        border: 1px solid #ff0000;
        background-color: #ff0000;
      }
    }
  }
}
</style>